<template>
  <div id="water-pay">
    <div class="scene-describe">
      <p class="scene-2-tip">供水线下缴费场景：</p>
      <a-row class="scene-2-row">
        <a-col span="4">场景描述：</a-col>
        <a-col span="14">
          模拟供水缴费系统，首先输入用户编号，输入缴费金额，缴费方式选择自动识别
          或者承德一码通，等待用户出示二维码扫码。用户打开载体APP，进入一码通H5页
          面，展示二维码，扣在扫码墩上，调起支付页面，支付成功后，供水缴费系统上
          显示“支付成功”，客户姓名、编号、缴费金额和账户余额
        </a-col>
      </a-row>
      <a-row class="scene-2-row">
        <a-col span="4">场景说明：</a-col>
        <a-col span="14">
          第三方开发商需要新对接“一码通”的入园方式，demo程序能自动识别二维码类型为“一码通”方式
        </a-col>
      </a-row>
    </div>
    <div class="scene-2-pay">
      <a-row class="scene-2-pay-row">
        <a-col span="10">
          <a-col span="8">
            <p>缴费项目：</p>
          </a-col>
          <a-col span="9">
            <p>{{ info.project }}</p>
          </a-col>
        </a-col>
        <a-col span="10">
          <a-row class="water-row">
            <a-col span="8">
              <p>收费单位：</p>
            </a-col>
            <a-col span="12">
              <p>{{ info.company }}</p>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row class="scene-2-pay-row">
        <a-col span="10">
          <a-row class="water-row">
            <a-col span="8">
              <p>用户编号：</p>
            </a-col>
            <a-col span="12">
              <a-input v-model="info.number"></a-input>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <div @click="next" class="scene-2-btn">
        <p>下一步</p>
      </div>
    </div>
  </div>
</template>

<script>
import ACol from "ant-design-vue/es/grid/Col";
export default {
  components: { ACol },
  data() {
    return {
      info: {
        project: "承德市水费",
        company: "承德市供水集团有限公司",
        number: "01080099"
      }
    };
  },
  methods: {
    next() {
      this.$router.push("/water/bill");
    }
  }
};
</script>

<style lang="less" scoped>
#water-pay {
  .scene-describe {
    margin: 30px 40px 20px 60px;
    color: #333;
    .scene-2-tip {
      font-size: 28px;
      font-weight: 600;
      font-family: AlibabaPuHuiTiR;
    }

    .scene-2-row {
      font-size: 16px;
      line-height: 28px;
      padding: 10px 0;
    }
  }
  .scene-2-pay {
    margin: 20px 25px;
    background: #f2f2f2;
    padding: 25px 18px;

    .scene-2-pay-row {
      font-size: 16px;
      margin: 10px 0;
    }

    .scene-2-btn {
      margin-left: 14%;
      border-radius: 5px;
      width: 20.5%;
      cursor: pointer;
      background: #1296db;
      text-align: center;
      p {
        padding: 8px 0;
        color: #fff;
      }
    }
  }
}
  p {
    margin: 0;
    padding: 0;
  }
</style>
